// src/screens/main/FeatureListScreen.tsx
import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    TouchableOpacity,
    Dimensions,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useSelector } from 'react-redux';
import Icon from 'react-native-vector-icons/MaterialIcons';
import LinearGradient from 'react-native-linear-gradient';
import type { StackNavigationProp } from '@react-navigation/stack';
import type { MainStackParamList, MainTabParamList } from '../../navigation/MainNavigator';
import { RootState } from '../../store/store';

const { width } = Dimensions.get('window');

type NavigationProp = StackNavigationProp<MainStackParamList>;

interface Feature {
    id: string;
    title: string;
    description: string;
    icon: string;
    color: string[];
    screen: keyof MainTabParamList;
    comingSoon?: boolean;
    premium?: boolean;
    category: 'ai' | 'productivity' | 'media' | 'utility';
}

interface FeatureCategory {
    id: string;
    title: string;
    description: string;
    features: Feature[];
}

const FeatureListScreen: React.FC = () => {
    const navigation = useNavigation<NavigationProp>();
    const { subscription } = useSelector((state: RootState) => state.subscription);

    const categories: FeatureCategory[] = [
        {
            id: 'ai',
            title: 'AI智能',
            description: '体验最新的人工智能技术',
            features: [
                {
                    id: 'chat',
                    title: 'AI聊天',
                    description: '与GPT-4等先进AI模型进行智能对话，获得专业答案和创意灵感',
                    icon: 'chat',
                    color: ['#667eea', '#764ba2'],
                    screen: 'Chat',
                    category: 'ai',
                },
                {
                    id: 'chat_advanced',
                    title: '高级对话',
                    description: '支持上下文记忆、角色扮演、专业领域对话',
                    icon: 'psychology',
                    color: ['#667eea', '#764ba2'],
                    screen: 'Chat',
                    category: 'ai',
                    premium: true,
                },
            ],
        },
        {
            id: 'productivity',
            title: '效率工具',
            description: '提升工作和学习效率',
            features: [
                {
                    id: 'translate',
                    title: '智能翻译',
                    description: '支持100+语言的高质量翻译，专业术语准确翻译',
                    icon: 'translate',
                    color: ['#f093fb', '#f5576c'],
                    screen: 'Translate',
                    category: 'productivity',
                },
                {
                    id: 'batch_translate',
                    title: '批量翻译',
                    description: '一键翻译多个文档，支持Word、PDF等格式',
                    icon: 'file_copy',
                    color: ['#f093fb', '#f5576c'],
                    screen: 'Translate',
                    category: 'productivity',
                    premium: true,
                },
                {
                    id: 'writing_assistant',
                    title: '写作助手',
                    description: 'AI辅助写作、润色、语法检查和风格优化',
                    icon: 'edit',
                    color: ['#ffeaa7', '#fdcb6e'],
                    screen: 'Chat',
                    category: 'productivity',
                    comingSoon: true,
                },
                {
                    id: 'summarization',
                    title: '智能摘要',
                    description: '自动提取长文本的关键信息，生成简洁摘要',
                    icon: 'summarize',
                    color: ['#fd79a8', '#e84393'],
                    screen: 'Chat',
                    category: 'productivity',
                    comingSoon: true,
                },
            ],
        },
        {
            id: 'media',
            title: '多媒体',
            description: '音频、视频、图像处理',
            features: [
                {
                    id: 'voice_to_text',
                    title: '语音转文字',
                    description: '高精度语音识别，支持多种语言和方言',
                    icon: 'mic',
                    color: ['#4facfe', '#00f2fe'],
                    screen: 'Voice',
                    category: 'media',
                },
                {
                    id: 'text_to_voice',
                    title: '文字转语音',
                    description: '自然语音合成，多种音色和语速可选',
                    icon: 'record_voice_over',
                    color: ['#4facfe', '#00f2fe'],
                    screen: 'Voice',
                    category: 'media',
                    premium: true,
                },
                {
                    id: 'image_analysis',
                    title: '图像分析',
                    description: 'AI识别图像内容，提取文字，理解图像含义',
                    icon: 'image_search',
                    color: ['#43e97b', '#38f9d7'],
                    screen: 'Chat',
                    category: 'media',
                    comingSoon: true,
                },
                {
                    id: 'image_generation',
                    title: '图像生成',
                    description: '根据文字描述生成高质量图像和艺术作品',
                    icon: 'auto_awesome',
                    color: ['#43e97b', '#38f9d7'],
                    screen: 'Chat',
                    category: 'media',
                    comingSoon: true,
                    premium: true,
                },
            ],
        },
        {
            id: 'utility',
            title: '实用工具',
            description: '日常使用的便民工具',
            features: [
                {
                    id: 'code_helper',
                    title: '代码助手',
                    description: '代码生成、调试、优化和解释',
                    icon: 'code',
                    color: ['#a29bfe', '#6c5ce7'],
                    screen: 'Chat',
                    category: 'utility',
                    comingSoon: true,
                },
                {
                    id: 'data_analysis',
                    title: '数据分析',
                    description: '智能分析数据，生成图表和报告',
                    icon: 'analytics',
                    color: ['#fd79a8', '#e84393'],
                    screen: 'Chat',
                    category: 'utility',
                    comingSoon: true,
                    premium: true,
                },
                {
                    id: 'schedule_assistant',
                    title: '日程助手',
                    description: '智能安排日程，提醒重要事项',
                    icon: 'schedule',
                    color: ['#00cec9', '#55a3ff'],
                    screen: 'Chat',
                    category: 'utility',
                    comingSoon: true,
                },
                {
                    id: 'language_learning',
                    title: '语言学习',
                    description: 'AI陪练口语，个性化学习方案',
                    icon: 'school',
                    color: ['#fd79a8', '#fdcb6e'],
                    screen: 'Chat',
                    category: 'utility',
                    comingSoon: true,
                    premium: true,
                },
            ],
        },
    ];

    const handleFeaturePress = (feature: Feature) => {
        if (feature.comingSoon) {
            return;
        }

        if (feature.premium && subscription?.plan !== 'PREMIUM') {
            navigation.navigate('Subscription');
            return;
        }

        navigation.navigate('MainTabs', { screen: feature.screen });
    };

    const renderFeatureCard = (feature: Feature) => (
        <TouchableOpacity
            key={feature.id}
            style={[
                styles.featureCard,
                feature.comingSoon && styles.featureCardDisabled
            ]}
            onPress={() => handleFeaturePress(feature)}
            disabled={feature.comingSoon}
            activeOpacity={0.7}
        >
            <LinearGradient
                colors={feature.color}
                style={styles.featureGradient}
            >
                <Icon name={feature.icon} size={28} color="#fff" />

                {/* 状态标签 */}
                {feature.comingSoon && (
                    <View style={styles.comingSoonBadge}>
                        <Text style={styles.comingSoonText}>即将推出</Text>
                    </View>
                )}

                {feature.premium && !feature.comingSoon && (
                    <View style={styles.premiumBadge}>
                        <Icon name="star" size={12} color="#ffd700" />
                        <Text style={styles.premiumText}>PRO</Text>
                    </View>
                )}
            </LinearGradient>

            <View style={styles.featureContent}>
                <Text style={styles.featureTitle}>{feature.title}</Text>
                <Text style={styles.featureDescription} numberOfLines={3}>
                    {feature.description}
                </Text>

                <View style={styles.featureFooter}>
                    {feature.premium && subscription?.plan !== 'PREMIUM' && !feature.comingSoon && (
                        <Text style={styles.upgradeHint}>需要升级到专业版</Text>
                    )}
                </View>
            </View>
        </TouchableOpacity>
    );

    const renderCategory = (category: FeatureCategory) => (
        <View key={category.id} style={styles.categorySection}>
            <View style={styles.categoryHeader}>
                <Text style={styles.categoryTitle}>{category.title}</Text>
                <Text style={styles.categoryDescription}>{category.description}</Text>
            </View>

            <View style={styles.featuresGrid}>
                {category.features.map(renderFeatureCard)}
            </View>
        </View>
    );

    const availableFeatures = categories.reduce((total, category) =>
        total + category.features.filter(f => !f.comingSoon).length, 0
    );

    const comingSoonFeatures = categories.reduce((total, category) =>
        total + category.features.filter(f => f.comingSoon).length, 0
    );

    return (
        <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
            {/* 统计卡片 */}
            <View style={styles.statsContainer}>
                <LinearGradient
                    colors={['#667eea', '#764ba2']}
                    style={styles.statsCard}
                >
                    <View style={styles.statsContent}>
                        <View style={styles.statItem}>
                            <Text style={styles.statNumber}>{availableFeatures}</Text>
                            <Text style={styles.statLabel}>可用功能</Text>
                        </View>
                        <View style={styles.statDivider} />
                        <View style={styles.statItem}>
                            <Text style={styles.statNumber}>{comingSoonFeatures}</Text>
                            <Text style={styles.statLabel}>即将推出</Text>
                        </View>
                        <View style={styles.statDivider} />
                        <View style={styles.statItem}>
                            <Text style={styles.statNumber}>
                                {subscription?.plan === 'PREMIUM' ? 'PRO' : 'FREE'}
                            </Text>
                            <Text style={styles.statLabel}>当前版本</Text>
                        </View>
                    </View>

                    {subscription?.plan !== 'PREMIUM' && (
                        <TouchableOpacity
                            style={styles.upgradeButton}
                            onPress={() => navigation.navigate('Subscription')}
                        >
                            <Text style={styles.upgradeButtonText}>升级到专业版</Text>
                            <Icon name="arrow-forward" size={16} color="#fff" />
                        </TouchableOpacity>
                    )}
                </LinearGradient>
            </View>

            {/* 功能分类 */}
            {categories.map(renderCategory)}

            {/* 底部提示 */}
            <View style={styles.bottomTip}>
                <Icon name="info" size={20} color="#999" />
                <Text style={styles.tipText}>
                    更多功能正在开发中，敬请期待！
                </Text>
            </View>
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f8f9fa',
    },
    statsContainer: {
        padding: 20,
    },
    statsCard: {
        borderRadius: 15,
        padding: 20,
    },
    statsContent: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginBottom: 15,
    },
    statItem: {
        alignItems: 'center',
    },
    statNumber: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#fff',
    },
    statLabel: {
        fontSize: 12,
        color: '#fff',
        opacity: 0.8,
        marginTop: 4,
    },
    statDivider: {
        width: 1,
        backgroundColor: 'rgba(255, 255, 255, 0.3)',
    },
    upgradeButton: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(255, 255, 255, 0.2)',
        borderRadius: 25,
        paddingVertical: 10,
        paddingHorizontal: 20,
    },
    upgradeButtonText: {
        color: '#fff',
        fontWeight: '600',
        marginRight: 5,
    },
    categorySection: {
        marginBottom: 30,
    },
    categoryHeader: {
        paddingHorizontal: 20,
        marginBottom: 15,
    },
    categoryTitle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 5,
    },
    categoryDescription: {
        fontSize: 14,
        color: '#666',
    },
    featuresGrid: {
        paddingHorizontal: 20,
    },
    featureCard: {
        backgroundColor: '#fff',
        borderRadius: 15,
        marginBottom: 15,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 3.84,
        elevation: 5,
        overflow: 'hidden',
    },
    featureCardDisabled: {
        opacity: 0.6,
    },
    featureGradient: {
        height: 80,
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
    },
    comingSoonBadge: {
        position: 'absolute',
        top: 10,
        right: 10,
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
        borderRadius: 12,
        paddingHorizontal: 8,
        paddingVertical: 4,
    },
    comingSoonText: {
        color: '#fff',
        fontSize: 10,
        fontWeight: 'bold',
    },
    premiumBadge: {
        position: 'absolute',
        top: 10,
        right: 10,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
        borderRadius: 12,
        paddingHorizontal: 8,
        paddingVertical: 4,
    },
    premiumText: {
        color: '#ffd700',
        fontSize: 10,
        fontWeight: 'bold',
        marginLeft: 2,
    },
    featureContent: {
        padding: 15,
    },
    featureTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 5,
    },
    featureDescription: {
        fontSize: 14,
        color: '#666',
        lineHeight: 20,
        marginBottom: 10,
    },
    featureFooter: {
        minHeight: 20,
        justifyContent: 'flex-end',
    },
    upgradeHint: {
        fontSize: 12,
        color: '#f39c12',
        fontWeight: '500',
    },
    bottomTip: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
        marginBottom: 20,
    },
    tipText: {
        fontSize: 14,
        color: '#999',
        marginLeft: 8,
    },
});

export default FeatureListScreen;